<template>
   <div class="tab-list">
     <div class="tab-item" v-for="(item,index) in storeData" :key="index" @click="toStore">
         <img :src="item.pic" alt="这是一张图片">
         <div class="item_msg">
           <div class="title">
             {{item.title}}
           </div>
           <div class="sales">{{item.sales}}</div>
           <div class="price">起送费 ￥{{item.price}} 免配送费</div>
           <div class="label">
               <div v-for="(i,index) in item.label" :key="index">{{i}}</div>
           </div>
         </div>
     </div>
   </div>
</template>

<script>
 import { useRouter } from "vue-router"
export default {
  name:'TabList',
  props:{
    storeData:{
      type:Array,
      default(){
        return [];
      }
    }
  },
  setup(){
    const router = useRouter();
    function toStore(){
       router.push('/store')
      console.log('页面跳转');
    }
    return {
      toStore
    }
  }
}
</script>

<style scoped lang="less">
 .tab-list{
   margin-top: 10px;
   .tab-item{
     display: flex;
     justify-content: space-between;
     align-items: center;
     background-color: #fff;
     border-radius: 10px;
     padding: 10px;
     img{
       width: 120px;
       height: 120px;
       border-radius: 10px;
       margin-left: 10px;
     }
     .item_msg{
       display: flex;
       flex-direction: column;
       justify-content:space-around;
       margin-right: 10px;
       div:nth-child(-n+4){
          margin-top: 5px;
       }
       .title{
         font-weight:700;
         font-size: 18px;
       }
       .label{
           display: flex;
          div{
            background-color: #ffc40047;
            margin-right: 8px;
          }
       }
     }
   }
 }
</style>